<template>
	<div class="companyVote">
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider1.jpg" alt="" /></div>
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider2.jpg" alt="" /></div>
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider3.jpg" alt="" /></div>
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider4.jpg" alt="" /></div>
		    </div>
		    <div class="swiper-pagination"></div>
		</div>
		<div class="section voteSection" v-if="companyVoteInfo">
			<div class="sectionVote">
				<table class="voteListTime"><tbody><tr>
					<td>
						<p class="color_666">报名/投票时间</p>
						<i class="ico"></i>
						<p class="color_999">{{ companyVoteInfo.voteTime }}</p>	
					</td>
					<td>
						<p class="color_666">频奖时间</p>
						<i class="ico"></i>
						<p class="color_999">{{ companyVoteInfo.prizeTime }}</p>
					</td>
					<td>
						<p class="color_666">频奖地点</p>
						<i class="ico"></i>
						<p class="color_999">{{ companyVoteInfo.prizePlace }}</p>	
					</td>
				</tr></tbody></table>
			</div>
			<div class="sectionContent">
				<table class="voteResult"><tbody><tr>
					<td>
						<p class="number">{{ companyVoteInfo.signupNumber }}</p>
						<p class="color_999">报名人数</p>	
					</td>
					<td style="border:1px solid #ddd;border-top:none;border-bottom: none;;">
						<p class="number">{{ companyVoteInfo.voteNumber }}</p>
						<p class="color_999">总投票总数</p>	
					</td>
					<td>
						<p class="number">{{ companyVoteInfo.visitNumber }}</p>
						<p class="color_999">总访问数</p>	
					</td>
				</tr></tbody></table>
			</div>
		</div>
		<div class="section">
			<div class="defaultShow">
				<div class="searchCompany clearfloat">
					<div class="searchInput l">
						<input class="text" type="text" v-model="companyNameSearch" name="companyName" placeholder="搜索公司"/>
						<img src="../assets/img/it@2x.png" alt="" class="ico" />
					</div>
					<button class="r" type="button"  v-on:click="onsubmitBtn">搜 索</button>
				</div>
				<div class="switchContent my-swiper-container" v-if="companyListArrayFlag">
					<div class="clearfloat">
						<ul class="tabSwitch1 tabSwitch"></ul>
						<ul class="tabSwitch r"><li><span v-on:click="moreController(true)"><img src="../assets/img/confont_@2x.png" alt="" /></span></li></ul>
					</div>
					<div class="tabcontent swiper-wrapper">
						<div class="contentBlock swiper-slide" v-for="(complayList,index) in companyListArray">
							<div v-if="complayList.length != 0">
								<div class="itemBlock" v-for="(item,index) in complayList">
									<div class="itemContent" v-lazy-container="{ selector: 'img.companyIco' }">
										<table border="0" cellspacing="0" cellpadding="0"><tbody><tr>
											<td class="itemInfo">
												<router-link :to="{ name: 'IntroduceCom', params: { id: item.id }}" style="display: block;">
													<img class="companyIco" v-bind:data-src="item.img" alt="" />
													<div class="stars">
														<img src="../assets/img/78k@2x.png" alt="" v-for=" index in item.starts" />
													</div>
													<p class="voteInfo">({{ item.evaluate }}条评价)</p>
												</router-link>
											</td>
											<td>
												<div class="itemDetail">
													<h3>
														<router-link :to="{ name: 'IntroduceCom', params: { id: item.id }}">
															<span>{{ item.title }}</span>
															<img v-if="item.type == 2" src="../assets/img/identification_no.png" alt="" />
															<img v-else="item.type == 1" src="../assets/img/identification_yes.png" alt="" />
														</router-link>
													</h3>
													<div class="clearfloat">
														<div class="message l">
															<router-link :to="{ name: 'IntroduceCom', params: { id: item.id }}" style="display: block;">
															<p class="info color_666">
																专家评分值 <span class="score">{{ item.score }}</span>
																企业好评率<span>{{ item.percent }}%</span>
															</p>
															<p class="info color_999">{{ item.view }}人已浏览咨询</p>
															</router-link>
														</div>
														<span class="btn r voteBtn">投票</span>
													</div>
												</div>
											</td>
										</tr></tbody></table>
									</div>
								</div>
							</div>
							<div class="itemBlock" style="text-align: center; font-size: 1.2em; color: red; padding-top: 40px;" v-else>
								没有数据
							</div>
						</div>
					</div>
				</div>
				<div class="companyAsyn">
					<div class="asynPage">
						<div class="itemBlock" v-for="(item,index) in searchDataArray"  v-if="searchFlag">
							<div class="itemContent" v-lazy-container="{ selector: 'img.companyIco' }">
								<table border="0" cellspacing="0" cellpadding="0"><tbody><tr>
									<td class="itemInfo">
										<router-link :to="{ name: 'IntroduceCom', params: { id: item.id }}" style="display: block;">
											<img class="companyIco" v-bind:data-src="item.img" alt="" />
											<div class="stars">
												<img src="../assets/img/78k@2x.png" alt="" v-for=" index in Math.round(item.sum_stars/item.votes)" />
											</div>
											<p class="voteInfo">({{ item.evaluate }}条评价)</p>
										</router-link>
									</td>
									<td>
										<div class="itemDetail">
											<h3>
												<router-link :to="{ name: 'IntroduceCom', params: { id: item.id }}">
													<span>{{ item.name }}</span>
													<!--<img v-if="item.type == 2" src="../assets/img/identification_no.png" alt="" />
													<img v-else="item.type == 1" src="../assets/img/identification_yes.png" alt="" />-->
												</router-link>
											</h3>
											<div class="clearfloat">
												<div class="message l">
													<router-link :to="{ name: 'IntroduceCom', params: { id: item.id }}" style="display: block;">
													<p class="info color_666">
														专家评分值 <span class="score">{{ item.votes }}</span>
														企业好评率<span>{{ item.praise }}%</span>
													</p>
													<p class="info color_999">{{ item.view }}人已浏览咨询</p>
													</router-link>
												</div>
												<span class="btn r voteBtn">投票</span>
											</div>
										</div>
									</td>
								</tr></tbody></table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="moreSelect"  style="display: none;">
				<h3>搜索公司</h3>
				<div class="switchContent">
					<ul class="tabSwitch clearfloat">
						<li class="l" style="padding-left:10px;"><span>筛选</span></li>
						<li class="r"><span v-on:click="moreController(false)"><img src="../assets/img/confon@2x.png" alt="" /></span></li>
					</ul>
					<div class="tabcontent">
						<div class="itemBlock moreContent">
							<h4 class="smallTitle">类别</h4>
							<ul class="companyTypeList clearfloat">
								<template v-for="(item, index) in companyType">
								<li v-bind:class="{active: item == companyTypeValue}">
									<label><input name="companyType" type="radio" v-model="companyTypeValue" v-bind:value="item"/>{{ item }}</label>
								</li>
								</template>
							</ul>
							<h4 class="smallTitle">热门公司</h4>
							<ul class="companyTypeList clearfloat">
								<template v-for="(item, index) in companyNameList">
								<li v-bind:class="{active: item == companyNameValue}">
									<label><input name="companyName" type="radio" v-model="companyNameValue" v-bind:value="item"/>{{ item }}</label>
								</li>
								</template>
							</ul>
						</div>
					</div>
				</div>
			</div>	
		
		</div>
		<router-link :to="{ name: 'WinPrize'}" class="signUpBtn clearfloat">我要报名</router-link>
		<footercontent></footercontent>
	</div>
</template>

<script>
	import headercontent from './header'
	import footercontent from './footer'
	import data from '../util/mock'
	import axios from 'axios'
	var companyType = [
		"外汇经纪",
		"软件提供",
		"支付平台",
		"资产管理平台",
		"贵金属",
		"解决方案",
		"区块链",
		"培训机构"
	];
	var companyNameList = [
		"富家天使基金会",
		"康华区块链"
	];
	export default {
  		name: 'CompanyVote',
  		components:{headercontent,footercontent},
  		data() {
			return {
				headerTitle: "外汇经纪商",
				companyVoteInfo:{},
				companyListArray:{},
				companyListArrayFlag:false,
				companyType:companyType,
				companyTypeValue:"",
				companyNameList:companyNameList,
				companyNameValue:"",
				companyNameSearch:"",
				companyFormFlag:false,
				searchFlag:false,
				searchDataUrl:"",
				searchDataArray:[],
			}
		},
		watch:{
	        companyTypeValue(val, oldVal){
	        	 this.dataChange();
	        },
	        companyNameValue(val, oldVal){
	        	this.dataChange();
	        }
	   },
  		mounted() {
			this.init();
			console.log(this.$route.params.data);
		},
		methods:{
			init(){
				var _this = this;
				axios.get(_this.$store.state.domain + 'company_type_info/1').then(function(res) {
					_this.companyVoteInfo = res.data.data;
				}).catch(function(error) {
					console.log(error);
				});
				
				var searchData = _this.$route.params.data;
				if(searchData != undefined){
					_this.searchFlag = true;
					_this.searchDataUrl = searchData.next_page_url;
					$('.companyAsyn .asynPage').dropload({
				        scrollArea : window,
				        domDown:{
				        	domClass : 'dropload-down',
							domRefresh : '',
							domLoad : '<div class="dropload-load"><span>正在为亲加载</span></div>',
							domNoData : '<div class="dropload-noData">暂无数据</div>'
				        },
				        distance:50,
				        loadDownFn : function(me){
				           _this.droploadFun = me;
				           _this.searchDataArray = searchData.data;
				           console.log(_this.searchDataArray);
				           _this.getData(_this.searchDataUrl,_this.droploadFun);
				        }
				    });
				}else{
					_this.companyListArrayFlag = true;
					_this.companySearchFormSubmit();
				}
				
				
				_this.companySearchFormSubmit();
				var swiper = new Swiper('.swiper-container', {
					loop: true,
				   	autoplay: {
			        delay: 3500
			      },
			      pagination: {
			        el: '.swiper-pagination',
			        clickable: true,
			        renderBullet: function (index, className) {
			          return '<span class="' + className + '"></span>';
			        },
			      },
			   });
			   
			   $(".CompanyVoteClass").on("click",function(){
			   	if(_this.companyTypeValue != "" || _this.companyNameValue != ""){
			   		_this.companyTypeValue = "";
			   		_this.companyNameValue = "";
			   		return false;
			   	}
			   	if(_this.companyNameSearch != "" && _this.companyFormFlag){
			   		_this.companyNameSearch = "";
			   		_this.dataChange();
			   		return false;
			   	}
			   });
			},
			getData(url,me){
				var _this = this;
				if(url){
					axios.get(url).then(function(res) {
						_this.searchDataArray = _this.searchDataArray.concat(res.data.data);
						_this.searchDataUrl = res.data.next_page_url;
						_this.$nextTick(()=>{
							if(me){
								me.resetload();
							}
					  });
					}).catch(function(error) {
						console.log(error);
						if(me){
							me.resetload();
						}
					});
				}else{
					me.lock();
                    me.noData();
                    console.log("no data");
				}
		
			},
			moreController(flag){
				if(flag){
					$(".defaultShow").hide();
					$(".moreSelect").show();
				}else{
					$(".defaultShow").show();
					$(".moreSelect").hide();
				}
				return false;
			},
			companyListSwiper(){
			    var _this = this;
			    $(".tabSwitch1").empty();
				var swiper2 = new Swiper('.my-swiper-container', {
			      	pagination: {
				        el: '.tabSwitch1',
				        clickable: true,
				        bulletClass : 'l',
				        bulletActiveClass: 'active',
				        renderBullet: function (index, className) {
				          switch (index) {
							  case 0: name='票数最多';break;
							  case 1: name='评论最多';break;
							  case 2: name='最新加入';break;
							  case 3: name='认证企业';break;
							  default: name='';
							}
					      return '<li class="' + className + '"><span>' + name + '</span></li>';
					  }
			        },
				    on: {
					    slideChangeTransitionEnd: function(){
					    	$(".tabSwitch1 li").removeClass("active").eq(this.activeIndex).addClass("active");
					        _this.adjustHeigt();
					    },
					    init: function(){
					      _this.adjustHeigt();
					    }
					}
			    });
			},
			adjustHeigt(){
				var activeHeight = 0;
			    $(".my-swiper-container .swiper-slide-active table").each(function(index,item){
			    	console.log($(item).height());
			      	var tempHeight = $(item).height() + 21;
			      	activeHeight += tempHeight;
			    });
			    if(activeHeight < 126){
			      	activeHeight = 126;
			    }
			    $(".my-swiper-container").css("height",activeHeight + 41);
			},
			companySearchFormSubmit(){
				var _this = this;
				axios.get('/test/mockData', {
				  params: {name: "CompanyVote",id:"all",companyTypeValue:_this.companyTypeValue,companyNameValue:_this.companyNameValue,companyNameSearch:_this.companyNameSearch}
				}).then(function(res) {
					console.log(res.data);
				
					_this.companyListArray = res.data.companyListArray;
					_this.$nextTick(()=>{ 
				       _this.companyListSwiper();
				   });
				}).catch(function(error) {
					console.log(error);
				});
			},
			onsubmitBtn(){
				var _this = this;
				var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i");   
			    if(pat.test(_this.companyNameSearch) || _this.companyNameSearch == ""){
			    	$(".dialogContent .usualMessage").empty().append('<span style="color:red">请输入正确的公司名或人名.</span>');
			    	_this.companyFormFlag = false;
			    	_this.openDialog();
			    	return false; 
			    }else{
			    	_this.companyFormFlag = true;
			    	_this.dataChange();
	        	}
			},
			dataChange(){
				var _this = this;
	        	_this.moreController(false);
	        	$(".dialogContent .usualMessage").empty().append('<div class="dropload-load"><span>正在为亲加载</span></div>');
	        	_this.openDialog();
	        	setTimeout(function(){
	        		_this.companySearchFormSubmit();
	        		_this.closeDialog();
	        	},1500);
	           
			},
			openDialog(){
				$(".usualMessage").show();
				$(".dialogTitle").empty().append("系统消息");
				$(".dialogMask").fadeIn();
    			$(".divDialog").fadeIn();
			},
			closeDialog(){
				$(".dialogMask").fadeOut();
    			$(".divDialog").fadeOut();
			}
		}
	}
</script>

<style>
	.sectionVote {background:#fff;padding:10px 15px;}
	.voteListTime {background:url(../assets/img/lineico.png) no-repeat center;}
	.color_666 {color:#666;}
	.color_999 {color:#999;}
	.voteSection .sectionContent {margin:10px 0px;padding:15px 0px;}
	.voteSection tr td {text-align: center;font-size: 1.2em;}
	.voteResult .number {font-size: 1.7em; color: #f50500; line-height: 15px; margin-bottom: 5px;}
	.voteResult p {margin:0px;}
	.voteListTime .ico {display: inline-block;width:10px;height:10px;border:1px solid #ddd;border-radius:50%;background: #fff;margin-top:5px;}
	.searchCompany {padding: 0 10px 10px;}
	.searchInput {position:relative;width: 80%;}
	.searchCompany .text {padding: 8px 10px; border: 1px solid #ddd; border-radius: 5px;text-indent: 20px;box-sizing: border-box;width:100%;}
	.searchInput .ico {position: absolute; left: 10px; top: 8px; width: 16px;}
	.searchCompany button{height: 33px; background: red; color: #fff; border: none; border-radius: 5px; width: 17%;}
	.switchContent {background:#fff;}
	.tabSwitch {padding:0 10px 0 0px}
	.tabSwitch li {font-size:1.2em;border-bottom: 1px solid #fff;color: #999;}
	.tabSwitch1 li {margin: 0px 10px;}
	.tabSwitch li.active {border-color:red;}
	.tabSwitch li span {line-height: 40px; display: -ms-flexbox;display: flex; display: -webkit-flex; -ms-flex-align: center; align-items: center;}
	.tabSwitch li img {width:18px;margin-top:10px;}
	.itemBlock {border-top:1px solid #ddd;background: #fff;}
	.stars img {width:16%;}
	.voteInfo {color:#f39800;font-size: 1.3em;}
	.itemDetail {padding-left: 10px;}
	.itemDetail h3 {font-size: 1.7em; font-weight: normal;margin-bottom:10px;color:#333;}
	.itemDetail h3 span {margin-right:10px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 62%;}
	.itemDetail h3 img {height: 16px;}
	.itemDetail .info {font-size:1.2em;margin-bottom: 2px;}
	.itemDetail .info span{color:#f39800;margin-left:2px;}
	.info .score {margin-right:10px;}
	.voteBtn {background:url("../assets/img/uyt@2x.png") no-repeat 8px 4px #f50500; padding: 0px 10px 0px 30px; color:#fff;font-size: 1.3em; border-radius: 5px; background-size: 16px; height: 25px; line-height: 25px;}
	.moreSelect h3 {font-size:1.6em;font-weight: normal;padding:0px 10px 10px;}
	.companyTypeList input {opacity: 0;position: absolute;}
	.smallTitle {font-size: 1.1em; font-weight: normal; padding: 10px;}
	.companyTypeList {padding:0px 10px;font-size:1.1em;}
	.companyTypeList li {float:left;padding: 5px 10px; border-radius: 5px; margin: 0 8px 8px 0; border: 1px solid #ddd;}
	.companyTypeList li.active {background: #E3E3E3; color: #656565;}
	.moreContent {padding-bottom: 20px;}
	.my-swiper-container {margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;}
	.signUpBtn { position: fixed; z-index: 999; right: -5px; top: 33%;color: #F61E1B; font-size: 1.3em;line-height:35px;background:url("../assets/img/signUpBtn.png") no-repeat ; background-size: contain; height: 40px; width: 95px; text-align: right; padding-right: 23px; box-sizing: border-box;}
</style>